<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <title>收入分析报表</title>
  <style>
    html,
    body,
    ul,
    li,
    p {
      margin: 0;
      padding: 0;
    }

    li {
      display: block;
    }

    img,
    canvas,
    video {
      vertical-align: middle;
    }

    html {
      background: #3c394a;
    }

    .tabbar {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }

    .tabbar-item {
      /* width: 50px;
      height: 50px; */
      border-radius: 100px;
      color: #fff;
      font-size: 13px;
      padding: 5px 10px;
      background-color: #9491c0;
    }

    .tabbar-item.active {
      background-color: #7971e9;
    }

    .tabbar-item-menu {
      background-color: #464358;
    }

    .wrap {
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      height: calc(100vh - 60px);
    }

    .block {
      margin: 0 10px 10px;
      background: #fff;
      border-radius: 5px;
      padding: 10px;
    }

    .block .title {
      display: flex;
      align-items: center;
      margin: 5px 0;
    }

    .block .title .icon {
      width: 25px;
      height: 25px;
      background-color: #6f9ff2;
      border-radius: 50%;
    }

    .block .title .text {
      color: #888;
      font-size: 15px;
      margin-left: 5px;
    }

    .block .item {
      color: #222;
      font-size: 14px;
      padding-top: 10px;
      display: flex;
      align-items: center;
    }

    .block .item strong {
      font-size: 15px;
    }

    .block .item i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #229c73;
      margin: 0 10px 0 5px;
    }

    .block .updateTime {
      text-align: right;
      font-size: 14px;
      color: #9aa;
    }

    /* vue animation */

    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }

    .fade-enter-to,
    .fade-leave {
      opacity: 1;
    }

    .fade-enter-active,
    .fade-leave-active {
      transition: all .2s;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="tabbar">
      <div v-for="(item, index) in tabbar" :key="index" class="tabbar-item" :class="tabbarIndex === index ? 'active' : ''" @click="tabbarIndex = index">
        <!-- <img src="" alt=""> -->
        {{item.text}}
      </div>
      <!-- <div class="tabbar-item tabbar-item-menu">
        <img src="" alt="">
      </div> -->
    </div>
    <div class="wrap">
      <!-- 查看收入 -->
      <!-- <transition-group name="fade"> -->
      <template v-if="tabbarIndex === 0">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img src="" alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>目标：
              <strong>{{item.income.target}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>实际：
              <strong>{{item.income.reality}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>回款：
              <strong>{{item.income.paymentCollectio}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- 账号条数 -->
      <template v-if="tabbarIndex === 1">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img src="" alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>总条数：
              <strong>{{item.accounts.total}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>本地美食：
              <strong>{{item.accounts.deliciousFoods}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>综合乐活：
              <strong>{{item.accounts.entertainment}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>综合民生：
              <strong>{{item.accounts.livelihood}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- 利润完成 -->
      <template v-if="tabbarIndex === 2">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img src="" alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>利润目标：
              <strong>{{item.profit.target}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>利润实际：
              <strong>{{item.profit.reality}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- 利润完成率 -->
      <template v-if="tabbarIndex === 3">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img src="" alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>百分比：
              <strong>{{item.profitRate.percentage}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- </transition-group> -->
    </div>
  </div>
  <script>
    function fakeData() {
      return (Math.random() * 300 + 50).toFixed(2)
    }
    var vm = new Vue({
      el: '#app',
      data: {
        tabbarIndex: 0,
        tabbar: [{
            color: '#7971e9',
            text: '查看收入'
          },
          {
            color: '#60aef8',
            text: '账号条数'
          },
          {
            color: '#60aef8',
            text: '利润完成'
          },
          {
            color: '#7971e9',
            text: '利润完成率'
          }
        ],
        list: [{
            company: '山东济南有点牛',
            income: {
              target: fakeData(),
              reality: fakeData(),
              paymentCollectio: fakeData(),
            },
            accounts: {
              total: parseInt(Math.random() * 100),
              deliciousFoods: fakeData(),
              entertainment: fakeData(),
              livelihood: fakeData(),
            },
            profit: {
              target: fakeData(),
              reality: fakeData(),
            },
            profitRate: {
              percentage: parseInt(Math.random() * 100) + '%'
            }
          }
          // {
          //   company: '广西有点牛',
          //   income: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //     paymentCollectio: fakeData(),
          //   },
          //   accounts: {
          //     total: parseInt(Math.random() * 100),
          //     deliciousFoods: fakeData(),
          //     entertainment: fakeData(),
          //     livelihood: fakeData(),
          //   },
          //   profit: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //   },
          //   profitRate: {
          //     percentage: parseInt(Math.random() * 100) + '%'
          //   }
          // },
          // {
          //   company: '南京微之鼎',
          //   income: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //     paymentCollectio: fakeData(),
          //   },
          //   accounts: {
          //     total: parseInt(Math.random() * 100),
          //     deliciousFoods: fakeData(),
          //     entertainment: fakeData(),
          //     livelihood: fakeData(),
          //   },
          //   profit: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //   },
          //   profitRate: {
          //     percentage: parseInt(Math.random() * 100) + '%'
          //   }
          // },
          // {
          //   company: '长春有点牛',
          //   income: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //     paymentCollectio: fakeData(),
          //   },
          //   accounts: {
          //     total: parseInt(Math.random() * 100),
          //     deliciousFoods: fakeData(),
          //     entertainment: fakeData(),
          //     livelihood: fakeData(),
          //   },
          //   profit: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //   },
          //   profitRate: {
          //     percentage: parseInt(Math.random() * 100) + '%'
          //   }
          // },
          // {
          //   company: '大连有点牛',
          //   income: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //     paymentCollectio: fakeData(),
          //   },
          //   accounts: {
          //     total: parseInt(Math.random() * 100),
          //     deliciousFoods: fakeData(),
          //     entertainment: fakeData(),
          //     livelihood: fakeData(),
          //   },
          //   profit: {
          //     target: fakeData(),
          //     reality: fakeData(),
          //   },
          //   profitRate: {
          //     percentage: parseInt(Math.random() * 100) + '%'
          //   }
          // }
        ]
      },
      mounted: function () {
        console.log('mounted')
      }
    })
  </script>
</body>

</html>
